<script setup lang="ts" name="systemType">
import { defineAsyncComponent, onMounted, reactive, ref, toRefs } from "vue";
import { notify } from "@/utils/element";
import {getComponentHubList, uninstall, uploadComponentHub} from "@/api/portal/componentHub";
import type {componentHubList, FileType} from "@/types/portal";
import {ElMessage, UploadRawFile, UploadRequestOptions} from "element-plus";
const MenuEdit = defineAsyncComponent(
    () => import("@/views/portal/subSystemType/components/subSystemType-edit.vue")
);

const SingleUpload = defineAsyncComponent(
    () => import("@/components/upload/SingleUpload.vue")
);
onMounted(() => {
  getPostData();
});

async function getPostData() {
  const { data } = await getComponentHubList();

  state.tableList = data;
  console.log("tableList", state.tableList);
}

//点击查询
function handleQuery() {
  //将页码设置为第一页
  state.page.pageNum = 1;
  getPostData();
}

const state = reactive({
  loading: false,
  page: {
    pageNum: 1,
    pageSize: 20,
    total: 0,
  } as PageType,
  query: {
    name: "",
  } as unknown as componentHubList,
  dataTree: [],
  tableList: [] as componentHubList[],
  addVisible: false,
});


async function uploadFile(options: UploadRequestOptions): Promise<any> {
  const { data: fileInfo } = await uploadComponentHub(options.file);
  handleQuery()
}

function handleBeforeUpload(file: UploadRawFile) {
  if (file.size > 50 * 1048 * 1048) {
    ElMessage.warning('上传图片不能大于50M');
    return false;
  }
  return true;
}
async function handleDelete(val: any) {
  try {
    state.loading = true;
    await uninstall(val.name);
    //提示成功
    notify("卸载成功！", { type: "success" });
    //刷新列表
    getPostData();
  } catch (error) {
  } finally {
    state.loading = false;
  }
}
const { loading, page, query, tableList } = { ...toRefs(state) };
const tableListRef = ref();
const editRef = ref();
</script>

<template>
  <div class="layout-padding">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card shadow="always">
          <el-form inline :model="query">
            <el-form-item label="分类名称">
              <el-input
                  v-model="query.name"
                  maxlength="30"
                  placeholder="请输入分类名称"
                  clearable
              />
            </el-form-item>
            <el-form-item>
              <el-button @click="handleQuery()" icon="ele-Search" type="primary"
              >查询</el-button
              >
            </el-form-item>
            <el-form-item>
              <el-upload :accept="'.zip'" class="upload-demo" action="" :before-upload="handleBeforeUpload" :http-request="uploadFile" :show-file-list="false">
                <el-button icon="ele-Plus" type="success">上传插件</el-button>
              </el-upload>
            </el-form-item>
          </el-form>

          <el-table
              class="w100"
              ref="tableListRef"
              v-loading="loading"
              :data="tableList"
              row-key="name"
              border
              stripe
              :tree-props="{ children: 'plugins', hasChildren: 'hasChildren' }"
          >
            <el-table-column
                type="index"
                label="序号"
                align="center"
                width="100px"
            />
            <el-table-column
                prop="name"
                label="分类名称"
                header-align="center"
                align="center"
            >
              <template #default="{ row }">
                <span class="ml10">{{ row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column
                prop="version"
                label="版本号"
                header-align="center"
                align="center"
            >
              <template #default="{ row }">
                <span class="ml10">{{ row.version }}</span>
              </template>
            </el-table-column>
            <el-table-column
                prop="description"
                label="备注"
                header-align="center"
                align="center"
                show-overflow-tooltip
            />

            <el-table-column label="操作" align="center" width="240px">
              <template #default="{ row }">
                <el-popconfirm
                    @confirm="handleDelete(row)"
                    width="auto"
                    :title="`确定${row.enable ? '卸载' : '启动'  }【${row.name}】吗?`"
                >
                  <template #reference>
                    <el-button  v-if="row.version" @click.stop :icon="!row.enable ? 'ele-SuccessFilled' : 'ele-CircleCloseFilled'" :type="row.enable ? 'danger' : 'success'" link
                    >{{ row.enable ? '卸载' : '启用' }}</el-button
                    >
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <!-- 新增、编辑弹出组件 -->
    <MenuEdit ref="editRef" @refresh="getPostData" />
  </div>
</template>

<style scoped>
</style>
